<template>
  <div>
    <el-row :gutter="5">
      <el-col :xs="24" :sm="12" :md="12" :lg="6">
        <CommontCard title="总销售额" value="¥ 126,560">
          <!-- 中间 -->
          <template>
            <p>
              <span>
                周同比 12%
                <svg
                  t="1628563128128"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="14305"
                  width="12"
                  height="12"
                >
                  <path
                    d="M534.603 290.086l383.252 417.63c11.203 12.207 10.388 31.185-1.82 42.387A30 30 0 0 1 895.753 758H129.248c-16.568 0-30-13.431-30-30a30 30 0 0 1 7.897-20.284l383.252-417.63c11.202-12.207 30.18-13.022 42.387-1.82a30 30 0 0 1 1.82 1.82z"
                    fill="#d81e06"
                    p-id="14306"
                  ></path>
                </svg>
              </span>
              <span>
                周同比 12%
                <svg
                  t="1628563024404"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="12767"
                  width="12"
                  height="12"
                >
                  <path
                    d="M540.736 738.56l371.744-406.912a33.984 33.984 0 0 0-4.096-50.048 39.36 39.36 0 0 0-24.64-8.544H140.256c-20.896 0-37.824 15.904-37.824 35.52 0 8.448 3.232 16.64 9.12 23.072L483.264 738.56a39.584 39.584 0 0 0 57.472 0z"
                    p-id="12768"
                    fill="green"
                  ></path>
                </svg>
              </span>
            </p>
          </template>
          <!-- 命名插槽 -->
          <template #footer>
            <span>日销售额</span>
            <span>￥12,423</span>
          </template>
        </CommontCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6">
        <CommontCard title="总销售额" value="¥ 126,560">
          <!-- 中间 -->
          <template>
            <LineChart />
          </template>
          <!-- 命名插槽 -->
          <template #footer>
            <span>日销售额</span>
            <span>￥12,423</span>
          </template>
        </CommontCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6">
        <CommontCard title="总销售额" value="¥ 126,560">
          <!-- 中间 -->
          <template>
            <BarChart />
          </template>
          <!-- 命名插槽 -->
          <template #footer>
            <span>日销售额</span>
            <span>￥12,423</span>
          </template>
        </CommontCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6">
        <CommontCard title="总销售额" value="¥ 126,560">
          <!-- 中间 -->
          <template>
            <ProgressChart />
          </template>
          <!-- 命名插槽 -->
          <template #footer>
            <span>日销售额</span>
            <span>￥12,423</span>
          </template>
        </CommontCard>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CommontCard from './commontCard'
import LineChart from './lineChart'
import BarChart from './barChart'
import ProgressChart from './progressChart'
export default {
  name: 'Analysis',
  components: {
    CommontCard,
    LineChart,
    BarChart,
    ProgressChart
  }
}
</script>

<style></style>
